<script setup lang="ts">
import { useRisk } from '../useRisk';
import { reactive, ref, onMounted } from "vue";
const props = defineProps<{}>()
const emit = defineEmits(["determine"])
const initData = reactive({} as any)
const {
    output,
    showcalendar,
    showcalendar2,
    defaultDate,
    mendTime,
    mendTimeStart,
    mendTimeEnd,
    findTime,
    findTimeStart,
    findTimeEnd,
    onConfirm2,
    reset,
    determine,
    onConfirm,
    risktTypes,
    companys,
    mendStates,
    riskTypeCheck,
    show
} = useRisk(props, initData, emit)
defineExpose({
    show
})


</script>
<template>
    <div class="screen-page">
        <van-popup v-model:show="show" position="right" :style="{ width: '75%', height: '100%' }">
            <div>
                <div class="title">筛选</div>
                <div>
                    <div class="screen-condition">隐患类型</div>
                    <div class="condition-list">
                        <van-tag
                            size="large"
                            v-for="(item,index) in risktTypes"
                            @click="riskTypeCheck(item)"
                            :class="item.checked ? 'tag-checked' : ''"
                        >{{ item.name }}</van-tag>
                    </div>
                </div>
                <div>
                    <div class="screen-condition">风险等级</div>
                    <div class="condition-list">
                        <van-tag
                            size="large"
                            v-for="(item,index) in companys"
                            @click="riskTypeCheck(item)"
                            :class="item.checked ? 'tag-checked' : ''"
                        >{{ item.name }}</van-tag>
                    </div>
                </div>
                <div>
                    <div class="screen-condition">发现时间</div>
                    <van-row @click="showcalendar = true">
                        <van-col span="11">
                            <van-field
                                left-icon="notes-o"
                                v-model="findTimeStart"
                                input-align="center"
                                readonly
                            ></van-field>
                        </van-col>
                        <van-col center span="0.5">—</van-col>
                        <van-col span="11">
                            <van-field v-model="findTimeEnd" input-align="center" readonly />
                        </van-col>
                    </van-row>
                    <div class="condition-list">
                        <!-- <van-cell title="选择日期区间" :value="findTime" @click="showcalendar = true" /> -->
                        <van-calendar
                            v-model:show="showcalendar"
                            type="range"
                            color="#1989fa"
                            :min-date="new Date('1970/01/01')"
                            :default-date="defaultDate"
                            confirm-text="完成"
                            confirm-disabled-text="请选择结束时间"
                            @confirm="onConfirm"
                        />
                    </div>
                </div>
                <div>
                    <div class="screen-condition">建议整改时间</div>
                    <div class="condition-list">
                        <!-- <van-cell title="选择日期区间"  @click="showcalendar2 = true" /> -->
                        <van-calendar
                            v-model:show="showcalendar2"
                            type="range"
                            color="#1989fa"
                            :min-date="new Date('1970/01/01')"
                            :default-date="defaultDate"
                            confirm-text="完成"
                            confirm-disabled-text="请选择结束时间"
                            @confirm="onConfirm2"
                        />
                        <van-row @click="showcalendar2 = true">
                            <van-col span="11">
                                <van-field
                                    left-icon="notes-o"
                                    v-model="mendTimeStart"
                                    input-align="center"
                                    readonly
                                />
                            </van-col>
                            <van-col center span="0.5">—</van-col>
                            <van-col span="11">
                                <van-field v-model="mendTimeEnd" input-align="center" readonly />
                            </van-col>
                        </van-row>
                    </div>
                </div>

                <div>
                    <div class="screen-condition">整改状态</div>
                    <div class="condition-list">
                        <van-tag
                            size="large"
                            v-for="(item,index) in mendStates"
                            @click="riskTypeCheck(item)"
                            :class="item.checked ? 'tag-checked' : ''"
                        >{{ item.name }}</van-tag>
                    </div>
                </div>
            </div>
            <div class="bottom-btn">
                <van-button type="default" class="reset" @click="reset">重置</van-button>
                <van-button type="default" class="determine" @click="determine">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>
<style scoped>
.screen-page {
    display: flex;
    flex-direction: column;
}

.tag-checked {
    background-color: rgb(66, 141, 228) !important;
    color: white !important;
}
.title {
    margin: 20px 0 0 20px;
    font-size: 18px;
    font-weight: bold;
}
.screen-condition {
    font-size: 17px;
    margin-top: 15px;
    padding: 5px 0 5px 15px;
    color: rgb(66, 141, 228);
    border-top: 1px solid rgba(196, 186, 186, 0.075);
}
.condition-list {
    margin-bottom: 20px;
}
:deep(.van-tag--large) {
    margin-left: 15px;
    margin-top: 10px;
    background-color: rgb(240, 242, 241);
    color: rgb(68, 67, 67);
    /* font-weight: bolder; */
}
.bottom-btn {
    display: flex;
    /* align-self: flex-end; */
    justify-content: center;
}

.van-button {
    background-color: rgb(243, 243, 243);
    width: 30%;
    margin: 6px;
    border-radius: 10px;
}
.reset {
    margin-left: 0 !important;
    color: rgb(66, 141, 228);
}
.determine {
    background-color: rgb(66, 141, 228) !important;
    margin-left: 0 !important;
    color: white;
}
:deep(.van-calendar__popup.van-popup--bottom) {
    height: 60%;
}

/* :deep(.van-field__control) {
    border: 1px solid rgba(197, 195, 195, 0.377);
} */
:deep(.van-cell .van-field) {
    padding: 2px;
    background-color: black;
}
:deep(.van-col) {
    line-height: 40px;
}
</style>